<template>
    <!-- 学生成绩单 -->
    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="up-material">
            <span style="margin-left: 10px;">成绩列表</span>
        </div>

        <!-- 成绩单表格 -->
        <div class="table-list">

            <div class="list-item" v-for="(item,index) in gradeList" :key="index">

            <div class="list-item-left" >
                <img v-if="item.consequence == '未出成绩'" src="/src/assets/svg/document-folder2.svg">
                <img v-else src="/src/assets/svg/document-folder1.svg">
                <div class="list-text">
                    <span>{{ item.examName }}</span>
                    <span v-if="item.consequence == '未出成绩'">成绩:{{ item.consequence }}</span>
                    <span v-else>成绩:{{ item.consequence }}/(满分:{{ item.fullMark }})</span>
                </div>
            </div>
                <div class="list-item-right">
                    <n-button v-if="item.consequence == '未出成绩'" disabled>参看详情</n-button>
                    <n-button v-else @click="lookdetails(item)">参看详情</n-button>
                </div>
            </div>

           
        </div>
    </div>

    <!-- 确认进入考试弹窗 -->
    <n-modal v-model:show="showModal"  :mask-closable="false">
        <n-card style="width: 400px;height: 300px;" title=" " role="dialog" aria-modal="true">
            <!-- 关闭框 -->
            <template #header-extra>
                <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
            </template>
            <div style="display: flex;flex-direction: column;">
                <span style="text-align: center;font-size: 20px;margin-bottom: 10px;">考试注意事项</span>
                <span>1. 考试前请确保当前考试环境网络通畅。</span>
                <span>2. 考试时间截止后，将自动提交试卷</span>
            </div>
            <!-- 提交按钮 -->
            <template #footer>
                <div style="display: flex;justify-content: flex-end;">
                    <n-button @click="onEnterExam()">进入考试</n-button>
                </div>
            </template>
        </n-card>
    </n-modal>

</template>

<script setup>

import { computed, onMounted, ref } from 'vue';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';

import { useRouter } from 'vue-router';
import studentHttp from '@/api/studentHttp';
const userStore = useUserStore()
const router = useRouter()
const showModal = ref(false)

onMounted(()=>{
    //初始化成绩列表
    getAlreadySubmitExam()
})

const gradeList =ref({})


//获取考试的成绩列表
function getAlreadySubmitExam(){
 studentHttp.getAlreadySubmitExam(userStore.userInfo.userId).then((res)=>{
    console.log(res);
    gradeList.value = res.data
 })
}

//查看详情
function lookdetails(item){
    //根据这个可以查看详情
    router.push({name:'ExamDetails',params:{answerSheetId:item.answerSheetId}})
console.log(item.answerSheetId);

}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 关闭弹窗键 */
.i-img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.i-img:hover {
    transform: scale(1.2);
}

/* //成绩展示 */
.table-list {
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;

}
/* 列表每一个 */
.list-item {
    padding: 5px;
    border-radius: 10px;
    background: linear-gradient(to right,rgb(242, 237, 237),rgb(244, 197, 197,0.3));
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.list-item:hover{
    transform: scale(1.01);
}

/* 每一个列表左侧 */
.list-item-left{
    display: flex;
}
.list-text{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}
.list-text  span:nth-child(1){
    font-size: 20px;
    font-family: "楷体";
}
.list-text span:nth-child(2){
    font-size: 16x;
    font-family: "仿宋";
}
.list-item-right{
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}



.deleye-img:hover {
  transform: scale(1.2);
}
</style>